<template>
	<view class="zjy-card-form mt-16 fs-28 c-black-_9" :class="{ inner: inner }" v-if="orderDetail.tourists.length">
		<view class="zjy-card-title fs-32">游客信息</view>

		<view class="flex-a mt-30 mb-30" v-for="(item, index) in orderDetail.tourists" :key="index">
			<view class="w-160 c-grey-4e flex-a">
				游客
				<text v-if="orderDetail.tourists.length > 1">{{ index + 1 }}</text>
			</view>
			<view class="flex-col">
				<view class="mb-10">
					{{ item.name }}
				</view>
				<text class="c-grey-4e" v-if="item.id_number">{{ formatIdCard(item.id_number) }}</text>
			</view>
		</view>

		<view class="flex-a mt-30" v-if="orderDetail.contact_name">
			<text class="w-160 c-grey-4e">联系人</text>
			<view class="flex flex-col">{{ orderDetail.contact_name }}</view>
		</view>
		<view class="flex-a mt-30" v-if="orderDetail.contact_id_number">
			<text class="w-160 c-grey-4e">证件号</text>
			<view class="flex flex-col">{{ formatIdCard(orderDetail.contact_id_number) }}</view>
		</view>
		<view class="flex-a mt-30" v-if="orderDetail.contact_mobile">
			<text class="w-160 c-grey-4e">联系手机</text>
			<view class="flex flex-col" @click="phoneCall(orderDetail.contact_mobile)">
				{{ formatPhone(orderDetail.contact_mobile) }}
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
import { formatIdCard, formatPhone, phoneCall } from "@/mixins/mixins"

const props = defineProps({
	orderDetail: {
		type: Object,
		default: () => ({}),
	},
	inner: {
		type: Boolean,
		default: false,
	},
})
</script>
<style lang="scss" scoped>
.inner {
	margin-top: 0;
	padding: 0;
}
</style>
